import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  Upload,
  Icon,
  Modal,
  message
} from 'antd'
import { reqDeleteImg } from '../../api'
import { BASE_IMG_URL } from '../../utils/constants'
// 将图片转换为 Base64 编码
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  })
}

export default class PicturesWall extends Component {
  static propTypes = {
    imgs: PropTypes.array
  }

  state = {
    previewVisible: false, // 标识是否显示大图预览
    previewImage: '', // 大图的 url
    fileList: []
  }

  constructor (props) {
    super(props)

    let fileList = []

    // 如果传入 imgs 属性
    const { imgs } = this.props
    if (imgs && imgs.length > 0) {
      fileList = imgs.map((img, index) => ({
        uid: -index,
        name: img,
        status: 'done',
        url: BASE_IMG_URL + img
      }))
    }

    // 初始化状态
    this.state = {
      previewVisible: false, // 标识是否显示大图预览
      previewImage: '', // 大图的 url
      fileList
    }
  }


  // 获取所有已上传的文件名的数组
  getImgs = () => {
    return this.state.fileList.map(file => file.name)
  }
  // 隐藏 Modal
  handleCancel = () => this.setState({previewVisible: false});

  // 显示指定的file对应的大图
  handlePreview = async file => {
    console.log(file)
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj)
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    })
  }

  /*
  * file: 当前操作的图片文件(上传/删除)
  * fileList: 所有上传图片的文件对象的数组
  * */
  handleChange = async ({ file, fileList, event }) => {
    // console.log('handleChange()', file.status,  file)

    // 一旦上传成功, 将当前上传的fiLe的信息修正(name，url)
    if (file.status === 'done') {
      const result = file.response // { status: 0, data: { name: 'xxx.jpg', url: '图片地址' }}
      if (result.status === 0) {
        message.success('上传图片成功')
        const { name, url } = result.data
        file = fileList[fileList.length - 1]
        file.name = name
        file.url = url
      } else {
        message.error('上传图片失败')
      }
    } else if (file.status === 'removed') {
      // 删除图片
      const result = await reqDeleteImg(file.name)
      if (result.status === 0) {
        message.success('删除图片成功!')
      } else {
        message.error('删除图片失败!')
      }
    }

    // 在操作(上传/删除)过程中更新f ileList 状态
    this.setState({ fileList })
  }

  render() {
    const {previewVisible, previewImage, fileList} = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus"/>
        <div>上传</div>
      </div>
    )

    return (
      <div>
        <Upload
          action="/manage/img/upload" // 上传图片的接口地址
          accept='image/*' // 只上传图片
          name='image' // 请求参数名
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 3 ? null : uploadButton}
        </Upload>

        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{width: '100%'}} src={previewImage}/>
        </Modal>
      </div>
    )
  }
}
